<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>最符合你的电影角色</title>
		<script src="{:config('public.static')}/home/js/base.js"></script>
		<link rel="stylesheet" type="text/css" href="{:config('public.static')}/home/css/base.css" />
		<style type="text/css">
			p {
				position: absolute;
				bottom: 38%;
				left: 0.39rem;
				font-family: 'STKaiti';
				font-size: 0.4rem;
				font-weight: 100;
			}
			.generateZ div{
				position: relative;
			}
			
			#p1 p {
				color: #3fb1da;
			}
			
			#p2 p {
				color: #9ea618;
			}
			
			#p3 p {
				color: #0b8b48;
			}
			
			#p4 p {
				color: #cda0da;
			}
			
			#p5 .bg {
				/*background-image: url(img/fontBg.jpg);
				background-size: cover;
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;*/
				color: #eaa308;
			}
		</style>
	</head>

	<body>
		<div id="html2canvas">
			<div class="generateZ">
				<div id="p1">
					<p>我是<span class="title" ></span></p>
					<img src="{:config('public.static')}/home/img/zgr.jpg" alt="" width="100%" height="100%" />
				</div>
				<div id="p2">
					<p>我是<span class="title" ></span></p>
					<img src="{:config('public.static')}/home/img/llj.jpg" alt="" width="100%" height="100%" />
				</div>
				<div id="p3">
					<p>我是<span class="title" ></span></p>
					<img src="{:config('public.static')}/home/img/lcw.jpg" alt="" width="100%" height="100%" />
				</div>
				<div id="p4">
					<p>我是<span class="title" ></span></p>
					<img src="{:config('public.static')}/home/img/zxc.jpg" alt="" width="100%" height="100%" />
				</div>
				<div id="p5">
					<p class="bg">我是<span class="title" ></span></p>
					<img src="{:config('public.static')}/home/img/zrf.jpg" alt="" width="100%" height="100%" />
				</div>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
		<script src="{:config('public.static')}/home/js/html2canvas.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#p1, #p2, #p3,#p4,#p5').hide();
				second = new Date().getSeconds();
				if((second % 5) == 0) $('#p1').show();
				if((second % 5) == 1) $('#p2').show();
				if((second % 5) == 2) $('#p3').show();
				if((second % 5) == 3) $('#p4').show();
				if((second % 5) == 4) $('#p5').show();
				$(".title").text(sessionStorage["par1"])
			});
			$(document).ready(function() {
				var str = $('#html2canvas');
				html2canvas([str.get(0)], {
					onrendered: function(canvas) {
						var image = canvas.toDataURL("image/png");
						var pHtml = "<img src=" + image + " style='width:100%;height:100%;'/>";
						$('#html2canvas').html(pHtml);
						console.log(pHtml)
					}
				});
			})

		</script>
	</body>

</html>